<template>
    <div>
        <!--<div style="text-align: left">
            &lt;!&ndash;模糊查询&ndash;&gt;
            <el-form :inline="true" :model="caiinfo" class="demo-form-inline">
                <el-form-item label="菜系">
                    <el-input v-model="userInfo.userid" placeholder="菜系"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                    <el-button type="primary" @click="nullinfo">重置</el-button>
                </el-form-item>
            </el-form>
        </div>-->
        <div style="text-align: left"><el-button type="primary" @click="insertcaixi" round>添加</el-button></div>


        <!--表格-->
        <el-table
                :data="leiname"
                style="width:100%">
            <el-table-column
                    prop="rid"
                    label="编号"
                    width="320px">
            </el-table-column>
            <el-table-column
                    prop="restaurantname"
                    label="餐厅"
                    width="320px%">
            </el-table-column>
            <el-table-column
                    prop="style"
                    label="名称"
                    width="320px">
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="300px">
                <template slot-scope="scope">
                    <el-button type="danger" round @click="delectl(scope.row)" size="small">删除</el-button>
                    <el-button type="primary" round @click="selectlei(scope.row)" size="small">详情</el-button>
                    <el-button type="warning" round @click="updatecai(scope.row)" size="small">修改</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--分页-->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="pageSizes"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>

        <!--删除弹出框-->
        <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="30%"
               >
            <span>确定删除？</span>
                        <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="delectq">确 定</el-button>
             </span>
        </el-dialog>

        <!--菜单弹出框-->
        <el-dialog
                title="提示"
                :visible.sync="dialogVisible1"
                width="50%"
                >
            <span>

                 <template>
                    <el-table
                            :data="tableData"
                            style="width: 100%">
                      <el-table-column
                              prop="dishName"
                              label="菜名"
                              width="180">
                      </el-table-column>
                      <el-table-column
                              prop="price"
                              label="价格"
                              width="180">
                      </el-table-column>
                      <el-table-column
                              prop="number"
                              label="数量">
                      </el-table-column>

                       <el-table-column
                                    prop="addCheckData.url"
                                    label="菜品图片"
                            >
                            <template slot-scope="scope">
                                <img :src="scope.row.menuImg" style="width: 100px;height: 100px"/>
                            </template>
                       </el-table-column>
                    </el-table>
                  </template>

            </span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible1 = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible1 = false">确 定</el-button>
             </span>
        </el-dialog>

        <!--添加弹出框-->
        <el-dialog
                title="提示"
                :visible.sync="dialogVisible2"
                width="30%"
                >
            <span>

                <el-form :label-position="labelPosition" label-width="80px" :model="insertInfo">
                  <el-form-item label="菜系">
                    <el-input v-model="insertInfo.style"></el-input>
                  </el-form-item>
                </el-form>

            </span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible2 = false">取 消</el-button>
                <el-button type="primary" @click="insertcaixiq">确 定</el-button>
            </span>
        </el-dialog>

        <!--修改弹出框-->
        <el-dialog
                title="提示"
                :visible.sync="dialogVisible3"
                width="30%"
                >
            <span>
                <el-form :label-position="labelPosition" label-width="80px" :model="updatecaixi">
                  <el-form-item label="菜系">
                    <el-input v-model="updatecaixi.style"></el-input>
                  </el-form-item>
                </el-form>
            </span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible3 = false">取 消</el-button>
                <el-button type="primary" @click="updatecaiq">确 定</el-button>
             </span>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        name: "CookStyle",
        data(){
            return{
                //模糊查询员工信息
                userInfo:{},
                //菜品信息
                leiname:[],
                //总页数
                total:0,
                //当前第几页
                currentPage:1,
                //每页显示几条数组
                pageSizes:[5,10,15],
                //默认每页几条记录
                pageSize:5,
                caiinfo:{},
                //删除类别  餐厅id，类别id
                delectlei:{},
                //删除弹出框
                dialogVisible:false,
                //删除cid
                cid:"",
                //删除
                rid:"",
                //详情
                selecta:{},
                //菜单弹出框
                dialogVisible1:false,
                //菜单表格
                tableData:{},
                //添加弹出框
                dialogVisible2:false,
                //添加菜系
                insertInfo:{},
                //表单的对其方式
                labelPosition: 'right',
                //修改弹出框
                dialogVisible3:false,
                //修改表单
                updatecaixi:{},
            }
        },
        //页面加载完毕
        created(){
            this.leiall();
        },
        methods:{
            //确定修改
            updatecaiq(){
                this.$http.post("/caipin/caipin/updatecaixi",this.updatecaixi).then(result=>{
                    this.$message.success(result.data.msg);
                    this.dialogVisible3=false;
                });
            },
            //修改
            updatecai(row){
                this.dialogVisible3=true;
                this.updatecaixi=row;
                /*this.updatecaixi.style=row.style;*/
            },
            //确认添加
            insertcaixiq(){
                this.$http.post("/caipin/caipin/insertcaixi",this.insertInfo).then(result=>{
                    this.$message.success(result.data.msg);
                    this.dialogVisible2=false;
                });
            },
            //添加弹出框
            insertcaixi(){
                this.dialogVisible2=true;
            },
            //查看
            selectlei(row){
                this.selecta=row;
                this.$http.post("/caipin/caipin/selectlei",this.selecta).then(result=>{
                   this.dialogVisible1=true;
                   this.tableData=result.data.data;
                });
            },
            //确认删除
            delectq(){
                this.$http.post("/caipin/caipin/leiDelete",this.delectlei).then(result=>{
                    this.$message.success(result.data.msg);
                    this.dialogVisible=false;
                    this.leiall();
                });
            },
            //删除按钮
            delectl(row){
                this.delectlei=row;
                this.dialogVisible=true;
            },
            //条数发生改变时.
            handleSizeChange(val) {
                this.pageSize=val;
                this.leiall();
            },
            //页码发生改变
            handleCurrentChange(val) {
                this.currentPage=val;
                this.leiall();
            },
            //清空查询条件
            nullinfo(){
                this.userInfo={};
            },
            //点击使用模糊查询
            onSubmit(){

            }, //查询员工信息
            leiall(){
                //如果传递得参数为json格式 那么必须为post提交
                this.$http.post("/caipin/caipin/leicname?currentPage="+this.currentPage+"&pageSize="+this.pageSize).then(result=>{
                    console.log(result)
                    this.leiname=result.data.data.list;
                    this.total=result.data.data.total;
                });
            },

        }
    }
</script>

<style scoped>

</style>